<template>
  <!-- 消费红包 -->
  <div>
    <tableComponents :pagination="{currentPage,pageSize,total:list.all_num}" @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange" :isShow="false" :isHaveExport="false" @toAdd="coupon_show = true"
      :isHavePagination="false">
      <template v-slot:table>
        <el-table ref="multipleTable" :data="coupon_data" v-loading="loading" stripe header-row-class-name="head_color"
          tooltip-effect="dark" style="width: 99.9%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" class="tc" width="35"></el-table-column>

          <el-table-column label="排序" sortable :sort-method="sorta" align="center" width="80">
            <template slot-scope="scope">
              <div>
                <el-input @change="sortNew(scope.$index,scope.row)" v-model.number="scope.row.xf_sort" autocomplete="off"
                  size="small"></el-input>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="红包名称" min-width="80">
            <template slot-scope="scope">{{ scope.row.title }}</template>
          </el-table-column>

          <el-table-column label="红包支付类型" min-width="80">
            <template slot-scope="scope">
              <el-tag effect="dark" v-if="scope.row.pay_types == 0">普通红包</el-tag>
              <el-tag effect="dark" type="success" v-if="scope.row.pay_types == 1">积分兑换</el-tag>
              <el-tag effect="dark" type="warning" v-if="scope.row.pay_types == 2">余额兑换</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="金额(元)" min-width="50">
            <template slot-scope="scope">{{ scope.row.money|keepTwoNum }}</template>
          </el-table-column>

          <el-table-column label="积分兑换" min-width="50">
            <template slot-scope="scope">{{ scope.row.jf_change }}</template>
          </el-table-column>

          <el-table-column label="每人限量" min-width="50">
            <template slot-scope="scope">{{ scope.row.limit_num }}</template>
          </el-table-column>

          <el-table-column label="发布总数" min-width="50">
            <template slot-scope="scope">{{ scope.row.full_num }}</template>
          </el-table-column>

          <el-table-column label="已领取数" min-width="50">
            <template slot-scope="scope">{{ scope.row.receive_num }}</template>
          </el-table-column>

          <el-table-column label="操作" align="center" min-width="100">
            <template slot-scope="scope">
              <el-button :loading="$store.state.isLoading" size="mini" type="primary" @click="showEditDialog(scope.row)">编辑</el-button>
              <el-button :loading="$store.state.isLoading" size="mini" @click="deleteNew(scope.$index, scope.row.id)"
                type="danger">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- <template v-slot:footerLeft>
        <a class="aBtn aBtn_1 aBtn_lan2" @click="delSelection">删除</a>
      </template> -->
    </tableComponents>

    <coupon_dia :show="coupon_show" @receive_coupon="re_coupon" @close_coupon="close_recoupon"></coupon_dia>

    <el-dialog title="编辑红包" :visible.sync="edit_show" :close-on-click-modal="false" class="tl size_13" @close="closeDio" width="800px">
      <el-form :model="row" ref="data" label-width="120px">
        <el-form-item label="红包描述" prop="title">
          <el-col :span="12">
            <el-input placeholder v-model="row.new_desc" clearable></el-input>
          </el-col>
        </el-form-item>
        <el-form-item>
         <el-button :loading="$store.state.isLoading" size="medium" type="primary" @click.prevent="change_desc">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
  import switchc from "../currency/Swich";
  import HeadTitle from "@/components/currency/HeadTitle.vue";
  import letterSearch from "@/components/currency/letterSearch.vue";
  import coupon_dia from "@/components/page/coupon_dialog.vue";

  export default {
    data() {
      return {
        show: false,
        myshow: false,
        loading: false,
        list: [],
        allPage: 0,
        allNum: 0,
        pageSize: 10,
        currentPage: 1,
        editId: "",
        multipleSelection: "",
        arr: [],
        visible: false,
        clickNum: 1,
        updataIndex: "",
        searchAll: {},
        coupon_show: false,
        coupon_form: {
          id: "",
          type: "",
          desc: "",
          rating: "",
          is_open: ""
        },
        lev_options: this.$store.state,
        coupon_control: {
          is_open: 0,
          rating: 0
        },
        edit_show: false,
        row: {}
      };
    },
    props: {
      coupon_data: {
        type: Array,
        default: []
      },
      type: {
        type: String,
        default: ""
      }
    },
    components: {
      switchc,
      HeadTitle,
      letterSearch,
      coupon_dia
    },
    methods: {
      sorta(a, b) {
        return b - a;
      },
      sortNew(index, row) {
        var params = {};
        params.id = row.id;
        params.sort = row.xf_sort;
        if (this.type == "xf") {
          params.type = this.type;
        }
        this.$api.getPage.edit_coupon(params).then(res => {
          if (res.data.code == 200) {
            // this.getNewsAll();
            this.$emit("refresh");
          }
        });
      },
      showAddDialog() {
        this.show = true;
        console.log(this.show);
      },
      getSearch(obj) {
        this.searchAll = obj;
        this.$router.push(this.$route.path + "?page=" + 1);
        // this.getNewsAll(obj);
        this.$emit("refresh");
      },
      getNewsAll(data) {
        this.loading = true;
        var params = {};
        data = data || {};
        params = data;
        //得到所设置的优惠卷
        this.type = this.$route.query.action;
        if (this.type == "new") {
          this.type_name = "新手";
        } else if (this.type == "xf") {
          this.type_name = "消费";
        } else if (this.type == "pj") {
          this.type_name = "评价";
        } else if (this.type == "tj") {
          this.type_name = "推荐"
        } else if (this.type == "gl") {
          this.type_name = "归来"
        }
        params.type = this.type;
        this.$api.getPage.get_page_coupon(params).then(res => {
          if (res.data.code == 200) {
            this.list = res.data.result;
            this.coupon_control = res.data.result.other;
          }
          this.loading = false;
        });
      },
      handleSizeChange(val) {
        var params = this.searchAll;
        params.page = "";
        params.page_size = val;
        this.getNewsAll(params);
        this.pageSize = val;
        // console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.$router.push(this.$route.path + "?page=" + val);
      },
      handleSwitch(val, id) {
        //审核
        var params = {};
        params["id"] = id;
        val == true ? (params["is_check"] = 1) : (params["is_check"] = 0);
        this.$api.getUser.msgCheck(params).then(res => {
          // this.getNewsAll();
        });
      },
      handleSelectionChange(val) {
        //多选框赋值
        this.multipleSelection = val;
      },
      delSelection() {
        //删除
        this.$swal({
          title: "您确定要删除所选信息吗",
          text: "删除后将无法恢复，请谨慎操作！",
          type: "warning",
          showCancelButton: true,
          confirmButtonColor: "#DD6B55",
          confirmButtonText: "是的，我要删除",
          cancelButtonText: "容我三思"
        }).then(willDelete => {
          if (willDelete.value) {
            var str = "";
            for (var i in this.multipleSelection) {
              str += this.multipleSelection[i].id + "@";
            }
            str = str.slice(0, -1);

            var data = {
              id: str,
              type: this.$route.query.action
            };
            this.$api.getPage.del_coupon(data).then(res => {
              if (res.data.code == 200) {
                this.$swal("删除成功！", "您已经删除了所选信息。", "success");
                // this.getNewsAll();
                this.$emit("refresh");
              } else {
                this.$swal("删除失败！", "出错啦！", "success");
              }
            });
          }
        });
      },
      deleteNew(index, id) {
        var params = {
          id: id,
          type: this.$route.query.action
        };
        this.$swal({
          title: "您确定要删除这条信息吗",
          text: "删除后将无法恢复，请谨慎操作！",
          type: "warning",
          showCancelButton: true,
          confirmButtonColor: "#DD6B55",
          confirmButtonText: "是的，我要删除",
          cancelButtonText: "容我三思"
        }).then(willDelete => {
          if (willDelete.value) {

            this.$api.getPage.del_coupon(params).then(res => {
              if (res.data.code == 200) {
                this.$fnc.alertSuccess("删除成功");
                // this.getNewsAll();
                this.$emit("refresh");
              } else {
                this.$swal(res.data.result, "error");
              }
            });
          }
        });
      },
      showEditDialog(row) {
        // this.myshow = true;
        this.row = row;
        // this.clickNum++;
        this.edit_show = true;
      },
      change_desc() {
        let params = {};
        params.id = this.row.id;
        params.desc = this.row.new_desc;
        params.type = this.type;
        this.$api.getPage.edit_coupon(params).then(res => {
          if (res.data.code == 200) {
            this.$fnc.alertSuccess("修改成功");
            // this.getNewsAll();
            this.$emit("refresh");
            this.edit_show = false;
          } else {
            this.$fnc.alertError(res.data.result);
          }
        });
      },
      re_coupon(id) {
        //得到单条优惠卷,添加
        let params = {};
        params.id = id;
        params.desc = "";
        params.type = this.type;
        this.coupon_show = false;
        this.$api.getPage.edit_coupon(params).then(res => {
          if (res.data.code == 200) {
            this.$fnc.alertSuccess("添加成功");
            // this.getNewsAll();
            this.$emit("refresh");
          } else {
            this.$fnc.alertError(res.data.result);
          }
        });
      },
      close_recoupon() {
        //关闭优惠卷
        this.coupon_show = false;
      },
      get_user_lev() {
        //得到用户等级
        this.$api.getUser.getRatingList({}).then(res => {
          if (res.data.code == 200) {
            this.lev_options = res.data.result;
          }
        });
      },
      closeDio() {

      }
    },

    created() {
      // this.getNewsAll();
    },
    watch: {
      $route(to, from) {
        console.log(to.path, from);
        this.get_user_lev(); //得到用户等级
        // this.getNewsAll();
        this.$emit("refresh");
        this.coupon_form.type = this.type;
        if (this.type == "new") {
          this.type_name = "新手";
        } else if (this.type == "xf") {
          this.type_name = "消费";
        } else if (this.type == "pj") {
          this.type_name = "评价";
        }
      },
      coupon_control(old, after) {
        this.coupon_form.rating = this.coupon_control.rating;
        this.coupon_form.is_open = this.coupon_control.is_open;
      },
    }
  };
</script>

<style lang="less" scoped>
  thead>tr>th {
    height: 45px;
    line-height: 45px;
  }

  td,
  th {
    border: 1px solid #e1e3e4;
    font-size: 12px;
  }

  th {
    background: #f8f8f8;
    font-weight: normal;
    color: #323437;
  }

  td {
    height: 75px;
    color: #000;
  }

  .caozuo {
    padding-left: 50px;
  }

  .pl {
    padding-left: 15px;
  }

  .chkBox {
    display: block;
    margin: 0 auto;
    width: 18px;
    height: 18px;
    background: #fff;
  }

  .aBtn_1 {
    padding: 10px;
  }
</style>
